<template>
	<div>
		<!-- 轮播图区域 -->
		<mt-swipe :auto="3000">
			<!-- 在组件中，使用v-for循环的话，一定要使用 key -->
			<!--<mt-swipe-item v-for="item in bannerList" :key="item.url">
			<img :src="item.img" alt="">
			</mt-swipe-item>-->
			<mt-swipe-item><img src="/src/images/l1.jpg" alt=""/></mt-swipe-item>
			<mt-swipe-item><img src="/src/images/l4.jpg" alt=""/></mt-swipe-item>
			<mt-swipe-item><img src="/src/images/l5.jpg" alt=""/></mt-swipe-item>
		</mt-swipe>
		<!--六宫格-->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/menu1(1).png" alt=""/>
				<div class="mui-media-body">新闻资讯</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/menu2.png" alt=""/>
				<div class="mui-media-body">图片分享</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/menu3.png" alt=""/>
				<div class="mui-media-body">商品购买</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/menu4.png" alt=""/>
				<div class="mui-media-body">留言反馈</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/menu5.png" alt=""/>
				<div class="mui-media-body">视频专区</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/menu6.png" alt=""/>
				<div class="mui-media-body">联系我们</div></a></li>
		</ul>
	</div>
</template>

<script>
//	import { Toast } from "mint-ui";
//export default {
//	data(){
//		return{
//			bannerList:[]
//		}
//	},
//	created(){
//		this.getBanner()
//	},
//	methods:{
//		getBanner(){
//			this.$http.get("http://vue.studyit.io/api/getlunbo").then(result=>{
////				console.log(result.body);
//				if (result.body.status === 0) {
//					// 成功了
//					this.bannerList = result.body.message;
//				} else {
//					// 失败的
//					Toast("加载轮播图失败。。。");
//				}
//			})
//		}
//	}
//
//}
</script>

<style lang="scss" scoped>
.mint-swipe{
	height: 200px;
	.mint-swipe-item{
		&:nth-child(1){
			 background-color: springgreen;
		}
		&:nth-child(2){
			 background-color: salmon;
		}
		&:nth-child(3){
			 background-color: slateblue;
		}
         img{
	         width: 100%;
	         height: 100%;
         }
	}
}
.mui-grid-view.mui-grid-9{
	background-color: white;
	border: none;
	img{
		width: 60px;
		height: 60px;
	}
	.mui-media-body{
		font-size: 13px;
		color: #616369;
	}
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
	border: none;
}
</style>